<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4">
        <!-- <el-row justify="end">
          <el-button link type="success">采集仪器列表</el-button>
        </el-row> -->
        <el-row>
          <p class="pinformation">容器种类列表</p>
          <p class="totalStyle">共 {{ prjectTotal }} 条数据</p>
        </el-row>
        <el-table ref="mainTableRef" :data="projectList" row-key="jclbId" @row-click="rowClick"
          :row-class-name="tableRowClass">
          <el-table-column prop="jclbName" label="检测类别" align="left" />
          <el-table-column prop="containerTypeName" label="采样仪器种类" align="left" />
        </el-table>
      </el-col>
      <el-col :span="20">
        <el-row style="justify-content: space-between">
          <el-row>
            <p class="pinformation" style="margin-top: 9px">项目列表</p>
            <p class="totalStyle" style="margin-top: 6px">
              共 {{ total }} 条数据
            </p>
            <el-form-item label="点位数量：" style="margin-left: 10px">
              {{ countForm.pointCount || 0 }}
            </el-form-item>
            <el-form-item label="样品编号数：" style="margin-left: 10px">
              {{ countForm.sampleCount || 0 }}
            </el-form-item>
          </el-row>
          <el-row style="padding-top: 5px">
            <el-button size="small" type="success">保存</el-button>
          </el-row>
        </el-row>
        <el-table ref="subTableRef" :data="dyProjectList" style="margin-bottom: 10px">
          <el-table-column prop="pointName" label="点位名称" align="center" />
          <el-table-column prop="sampleCode" label="样品编号" align="center" />
          <el-table-column prop="jcxmName" label="检测项目" align="center">
            <template #default="scope">
              <span v-html="proxy.getSupAndSub(scope.row.jcxmName)"></span>
            </template>
          </el-table-column>
          <el-table-column label="天数×频次" align="center">
            <template #default="scope">
              {{ scope.row.sampleDay + "×" + scope.row.sampleCount }}
            </template>
          </el-table-column>
          <el-table-column label="是否分包" align="center">
            <template #default="scope">
              {{
                scope.row.isPackage == 0
                ? "否"
                : "是"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="containerTypeId" label="采样/容器" align="center">
            <template #default="scope">
              {{
                proxy.getItemByArray(
                  sys_sample_container,
                  "value",
                  scope.row.containerTypeId,
                  "label"
                )
              }}
            </template>
          </el-table-column>
          <el-table-column prop="minUse" label="最小用量" align="center">
            <template #default="scope">
              {{ scope.row.minUse }}
              {{ transformation(getUnitName(scope.row.unitId)) }}
            </template>
          </el-table-column>
          <el-table-column prop="methodCode" label="方法编号" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="success" @click="imageView(scope.row)" v-if="scope.row.sampleFileId">查看截图</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="form.pageNum" v-model:limit="form.pageSize"
          @pagination="getPageList" />
      </el-col>
    </el-row>
    <el-image-viewer v-if="showViewer" :url-list="[url]" />
  </div>
</template>

<script setup>
import {
  containerTypeList,
  getsampleListByContainer,
  getCount
} from "@/api/cyCheck/cyReady";
import { getUnitList } from "@/api/store/unit";
const { proxy } = getCurrentInstance();
const { sys_sample_container } = proxy.useShareDict("sys_sample_container");

const countForm = ref({});

const total = ref(0);
const prjectTotal = ref(0);
const projectList = ref([]);
const dyProjectList = ref([]);
const unitList = ref([]);
const form = ref({
  pageNum: 1,
  pageSize: 10,
});
const props = defineProps({
  projectId: {
    type: String, //参数类型
  },
});

function getList() {
  containerTypeList(props.projectId).then((res) => {
    projectList.value = res.data.treeConainerList
      ? res.data.treeConainerList
      : [];
    prjectTotal.value = res.data.count;
  });
}

const apiContainerTypeId = ref();
const apiJclbId = ref("");

function rowClick(row) {
  apiContainerTypeId.value = row.containerTypeId;
  apiJclbId.value = row.jclbId;
  if (apiContainerTypeId.value || apiContainerTypeId.value === 0) {
    getsampleListByContainer(
      props.projectId,
      apiContainerTypeId.value,
      apiJclbId.value,
      form.value
    ).then((res) => {
      total.value = res.total;
      dyProjectList.value = res.rows;
      heightBright.value = row.sFId;
    });
    getCount({
      projectId: props.projectId,
      containerTypeId: apiContainerTypeId.value,
      jclbId: apiJclbId.value
    }).then((res) => {
      countForm.value = res.data;
    });
  }
}

function getPageList() {
  getsampleListByContainer(
    props.projectId,
    apiContainerTypeId.value,
    apiJclbId.value,
    form.value
  ).then((res) => {
    dyProjectList.value = res.rows;
  });
}

getUnitList().then((res) => {
  unitList.value = res.data;
});

function getUnitName(id) {
  return proxy.getItemByArray(unitList.value, "unitId", id, "unitName");
}

function transformation(row) {
  return proxy.getSupAndSub(row);
}

// -----------------------图片预览----------------------
const showViewer = ref(false);
const url = ref("");

function imageView(row) {
  proxy.$download.previewSharePicById(row.sampleFileId).then((resp) => {
    url.value = resp;
    showViewer.value = true;
    nextTick(() => {
      $(".el-image-viewer__close").click(function () {
        showViewer.value = false;
      });
    });
  });
}

getList();

watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [
        { tableName: "main", bottomHeight: 22 },
        { tableName: "sub", bottomHeight: 73 },
      ];
    } else {
      heightParams.value = [
        { tableName: "main", bottomHeight: 22 },
        { tableName: "sub", bottomHeight: 22 },
      ];
    }
    getTableHeight();
  }
);

const heightParams = ref([
  { tableName: "main", bottomHeight: 22 },
  { tableName: "sub", bottomHeight: 31 },
]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
})

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

const heightBright = ref("-1");
function tableRowClass({ row }) {
  if (row) {
    if (row.sFId == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}
</script>

<style></style>
